<template>
	<!-- v-if="CouponBoxShow" -->
	<up-popup :show="true"  mode="bottom" :round="50" @close="close" @open="open">
	<view  style="width:100vw;height: 80vh;background-color: #ffb2b2;border-radius: 100rpx; ">
	    <view class="couponContent" @tap.stop.prevent="stop">
	        <view class="couponNav">
	            <view :class="'couponNavItem ' + (couponIndex == index ? 'couponNavItemA' : '')" @tap="couponNavChange"  :data-index="index"  v-for="(v, index) in couponNav" :key="index" >
	                <view class="text">{{ v }}</view> 
	                <view class="line"></view>
	            </view>
	        </view>
	        <view class="couponList" v-if="couponIndex == '0'">
	            <view class="couponItem couponItemcanbus" :data-index="index" @tap="couponAct" v-for="(item, index) in couponUseList" :key="index">
	                <view class="couponItems">
	                    <view class="ItemLeft">
	                        <view class="itemName" v-if="v.TypeCodeName == '兑换券'" style="background: #ffe6b2">{{ v.TypeCodeName }}</view>
	                        <view class="itemName" v-if="v.TypeCodeName == '折扣券'" style="background: #ffccb2">{{ v.TypeCodeName }}</view>
	                        <view class="itemName" v-if="v.TypeCodeName == '优惠券'" style="background: #ffb2b2">{{ v.TypeCodeName }}</view>
	                        <view class="itemName" v-if="v.TypeCodeName == '免排券'" style="background: #ffffb2">{{ v.TypeCodeName }}</view>
	                        <view v-else-if="v.TypeCodeName" class="main-left-top">{{ v.TypeCodeName }}</view>
	                        <view class="itemResult" v-if="item.TypeCode == '1'">
	                            <text>{{ utils.FormatNumber(item.deductionAmt) }}</text>
	                            元
	                        </view>
	                        <view class="itemResult" v-if="item.TypeCode == '2'">
	                            <text>{{ item.Discounts }}</text>
	                            折
	                        </view>
	                        <view class="itemResult" v-if="item.TypeCode == '3'">
	                            {{ item.GoodsName }}
	                        </view>
	                    </view>
	                    <view class="ItemRight">
	                        <view class="itemGoods">{{ item.TicketName }}</view>
	                        <view class="itemDate">有效期：{{ item.EndData }}</view>
	                        <view class="itemLimit" v-if="item.UseCondition == '1'">使用限制：每张桌台限用{{ item.RoomUseNum }}张</view>
	                        <view class="itemLimit" v-if="item.UseCondition == '2'">使用限制：会员每单消费可用{{ item.MemberUseNum }}张</view>
	                    </view>
	                </view>
	
	                <view class="itemNew" v-if="item.IsNew && couponIndex == '0'">新</view>
	
	                <view :class="'couponCheckBox ' + (!item.TypeState ? 'couponTypeState' : '')">
	                    <image :src="item.active ? iconData.couponed : iconData.coupon" mode="scaleToFill" :data-index="index" />
	                </view>
	            </view>
	        </view>
	        <view class="couponList" v-if="couponIndex == '1'">
	            <view class="couponItem" style="filter: grayscale(100%)" v-for="(item, index) in couponNotList" :key="index">
	                <view class="couponItems" style="width: 100%; filter: grayscale(100%)">
	                    <view class="ItemLeft" style="width: 180rpx">
	                        <view class="itemName">{{ item.TypeCodeName }}</view>
	                        <view class="itemResult" v-if="item.TypeCode == '1'">
	                            <text>{{ item.deductionAmt }}</text>
	                            元
	                        </view>
	                        <view class="itemResult" v-if="item.TypeCode == '2'">
	                            <text>{{ item.Discounts }}</text>
	                            折
	                        </view>
	                        <view class="itemResult" v-if="item.TypeCode == '3'">
	                            {{ item.GoodsName }}
	                        </view>
	                    </view>
	                    <view class="ItemRight" style="width: 450rpx">
	                        <view class="itemGoods">{{ item.TicketName }}</view>
	                        <view style="display: flex">
	                            <view class="itemDate">有效期：{{ item.EndData }}</view>
	                        </view>
	                        <view class="itemLimit" v-if="item.UseCondition == '1'">使用限制：每张桌台限用{{ item.RoomUseNum }}张</view>
	                        <view class="itemLimit" v-if="item.UseCondition == '2'">使用限制：会员每单消费可用{{ item.MemberUseNum }}张</view>
	                    </view>
	                    <view class="itemNew" v-if="item.IsNew && couponIndex == '0'">新</view>
	                </view>
	            </view>
	        </view>
	        <view class="couponBtn">
	            <view class="cancel" @tap="cancel">取消</view>
	            <view class="confirm" @tap="confirm">确认</view>
	        </view>
	    </view>
	</view>
	</up-popup>
</template>

<script setup>
	const couponNav = ['可使用优惠券', '不可用优惠券']
	const couponIndex = 0
	const couponUseList = [
		{},{}
	]
	const couponNotList = [
		{},{}
	]
	
</script>

<style scoped lang="scss">
	// .CouponBox {
	//     position: fixed;
	//     left: 0;
	//     bottom: 0;
	//     width: 100%;
	//     height: 100%;
	// 	background-color: blue;
	// 	// background-color: rgba($color: #000000, $alpha: 0.5);
	// }
	.CouponBox { 
	}
	.couponContent {
	    // height: 1000rpx;
	    // background-color: var(--second--back-color);
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    border-radius: 32rpx 32rpx 0 0;
	    .couponNav {
	        display: flex;
	        align-items: center;
	        border-bottom: 1rpx solid var(--line-self--color);
	        background: #f2f2f2;
	        border-radius: 48rpx 48rpx 0rpx 0rpx;
	        .couponNavItem {
	            width: 50%;
	            text-align: center;
	            .text {
	                color: #666;
	                padding: 20rpx 0;
	            }
	            .line {
	                height: 4rpx;
	                width: 60rpx;
	                /* background-color: #fff;*/
	                margin: auto;
	            }
	        }
	        .couponNavItemA {
	            position: relative;
	            width: 50%;
	            text-align: center;
	            .text {
	                font-weight: 700;
	                color: var(--one--self--color);
	                padding: 20rpx 0;
	            }
	            .line {
	                height: 4rpx;
	                width: 60rpx;
	                background-color: #fff;
	                margin: auto;
	            }
	        }
	        .couponNavItemA::before {
	            content: '';
	            position: absolute;
	            bottom: 0rpx;
	            left: 50%;
	            transform: translateX(-50%); /* 将元素水平移动其自身宽度的一半，实现居中 */
	            width: 60rpx;
	            height: 4rpx;
	            background: #212121;
	            border-radius: 2rpx;
	        }
	    }
	    .couponList {
	        // height: 800rpx;
	        overflow-y: scroll;
	        .couponItem {
	            position: relative;
	            display: flex;
	            align-items: center;
	            background-image: url('https://oss.jtmckj.com/wmp/qnjg/coupon/i_card_dui-gay.png');
	            background-size: 100% 100%;
	            margin: 20rpx 26rpx;
	            border-radius: 10rpx;
	            overflow: hidden;
	            box-sizing: border-box;
	            padding: 10rpx;
	            .couponItems {
	                position: relative;
	                display: flex;
	                align-items: center;
	                width: 600rpx;
	                height: 160rpx;
	
	                border-radius: 18rpx;
	                overflow: hidden;
	                .ItemLeft {
	                    width: 170rpx;
	                    /* text-align: center;*/
	                    .itemName {
	                        position: absolute;
	                        top: 0;
	                        left: 0;
	                        width: 80rpx;
	                        height: 32rpx;
	                        background: #cccccc;
	                        border-radius: 16rpx 0rpx 16rpx 0rpx;
	                        font-family: PingFang SC;
	                        font-weight: 500;
	                        font-size: 20rpx;
	                        color: #666666;
	                    }
	                    .itemResult {
	                        text-align: center;
	                        color: #ff3333;
	                        font-size: 26rpx;
	                        text {
	                            font-size: 36rpx;
	                        }
	                    }
	                }
	                .ItemRight {
	                    width: 400rpx;
	                    box-sizing: border-box;
	                    padding: 0 20rpx;
	                    .itemDate {
	                        height: 36rpx;
	                        padding: 0 15rpx;
	                        line-height: 36rpx;
	                        background: #d9d9d9;
	                        font-size: 24rpx;
	                        color: #999999;
	                        margin-bottom: 10rpx;
	                    }
	                    .itemGoods {
	                        color: #212121 !important;
	                        font-size: 34rpx;
	                        font-weight: bold;
	                        padding: 0 0 8rpx 0;
	                    }
	                    .itemLimit {
	                        color: #996600;
	                        font-size: 24rpx;
	                    }
	                }
	                .itemNew {
	                    position: absolute;
	                    top: 0;
	                    right: 0;
	                    background: linear-gradient(to right, #ff6a00, #e10119);
	                    color: #fff;
	                    font-size: 24rpx;
	                    padding: 0 14rpx;
	                    border-bottom-left-radius: 18rpx;
	                }
	            }
	            .couponCheckBox {
	                width: 70rpx;
	                text-align: right;
	                image {
	                    width: 36rpx;
	                    height: 36rpx;
	                }
	            }
	            .couponTypeState image {
	                background-color: #666;
	                pointer-events: none;
	            }
	        }
	        .couponItemcanbus {
	            background-image: url('https://oss.jtmckj.com/wmp/qnjg/coupon/i_card_dui.png') !important;
	            background-size: 100% 100% !important;
	            .ItemLeft {
	                .itemName {
	                    font-weight: 500;
	                    font-size: 20rpx;
	                    color: #212121 !important;
	                }
	            }
	            .itemDate {
	                background: #fff6e5 !important;
	                color: #ffbb33 !important;
	            }
	            .itemGoods {
	                color: #999999 !important;
	            }
	            .itemNew {
	                position: absolute;
	                top: 0;
	                right: 0;
	                background: linear-gradient(to right, #ff6a00, #e10119);
	                color: #fff;
	                font-size: 24rpx;
	                padding: 0 14rpx;
	                border-bottom-left-radius: 18rpx;
	            }
	        }
	    }
	    .couponBtn {
	        height: 90rpx;
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        view {
	            padding: 18rpx 80rpx;
	            border-radius: 60rpx;
	            margin-right: 24rpx;
	            font-size: 34rpx;
	            font-weight: bold;
	        }
	        .cancel {
	            color: #666666;
	            border: 2rpx solid #666666;
	        }
	        .confirm {
	            color: var(--four--self--color);
	            background-color: #212121;
	            border: 2rpx solid #212121;
	        }
	    }
	}
</style>